<template>
  <div>
    <div class="main" ref="scroll" :style="{boxShadow:(scrollTop>50?'0 0 10px gray':'')}">
    <div class="container">
      <h1><a href="javascript:;"></a></h1>
      <div class="Header-primary">
        <ul>
          <li>
            <div class="xiala">
              <!-- 下拉菜单 -->
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>个人介绍</el-dropdown-item>

                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </li>
          <li>
            个人介绍
          </li>
          <li>
            个人介绍
          </li>
        </ul>
      </div>

      <div class="Header-secondary">
        <ul>
          <li>
            <router-link to="/register">注册</router-link>
          </li>
          <li>
           <router-link to="/login">登录</router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>

  </div>
</template>
<script>
export default {
  name: 'HeaDer',
  data () {
    return {
      scrollTop: 0
    }
  },
  // 滚动监听
  mounted () {
    window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
  },
  methods: {
    // 获取页面滚动距离
    handleScroll () {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      this.scrollTop = scrollTop
    }
  },
  // 滚动重置
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>
<style lang="less" scoped>

.main {
  // <!-- box-shadow:0 0 10px gray; -->
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  // border-bottom: 1px solid gray;
  height: 60px;
  z-index: 1;
}
.container {
  padding: 0 70px;
  h1 {
    vertical-align: top;
    float: left;
    margin: 0 15px 0 0;
  }
  height: 100%;
  line-height: 60px;
  .Header-primary {
    float: left;
    li {
      margin-left: 20px;
      float: left;
      font-size: 14px;
    }

    li:first-child {
      margin: 0;
    }
  }
  .Header-secondary {
    float: right;
    li{
      margin-left: 20px;
      float: right;
      font-size: 14px;
      a{
        text-decoration: none;
        color: #999;
      }
    }
  }
  // display: flex;
  // justify-content: space-between;
}
ul {
  li {
    list-style: none;
  }
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 14px;
}
</style>
